<template>
  <!-- 内容页基础布局 -->
  <a-layout :style="{height:'100%'}" :class="{'tree-menu-layout':isTreeMenu}">
    <!-- 顶部 -->
    <global-header @ok="()=>$refs.headerNotice.show()" class="layoutHead" />
    <div style="height:calc(100vh - 38px);display: flex;overflow: hidden;">
      <!-- 菜单 -->
      <s-menu :menu="menus" @showejmenu="isShowEjMenu = $event" v-if="!isTreeMenu"></s-menu>
      <tree-menu :menu="menus" @showejmenu="isShowEjMenu = $event" v-else></tree-menu>
      <!-- 主内容 -->
      <div class="pageContent" :class="{thinWidth:isShowEjMenu}">
        <transition name="page-transition">
          <div class="pageContentMain" id="pageContentMain" ref="keepAliveContainer">
            <page-tab :keep-alive-component-instance="keepAliveComponentInstance" ref="pageTab"/>
<!--            <keep-alive :exclude="destroyedViews">-->
            <keep-alive :max="20">
              <route-view :key="$route.fullPath" class="pageViewSty" style="height: calc(100% - 128px);position:relative;"/>
            </keep-alive>
            <global-footer />
          </div>
        </transition>
        <!-- 最右侧弹窗区域 -->
        <page-drawer v-if="drawerCotentComp" />
        <a-modal v-if="innerLoginVisible" v-model:visible="innerLoginVisible" width="360px" :maskClosable="false" :closable="false" :footer="null"
            :bodyStyle="{'padding': '40px'}">
          <Login/>
        </a-modal>
        <a-modal v-if="ssoLoginVisible" v-model:visible="ssoLoginVisible" width="80%" :maskClosable="false" :closable="false" :footer="null"
                 :bodyStyle="{'height': '650px'}">
          <iframe :src="ssoSrc"
          style="width: 100%;height: 100%;border:0"/>
        </a-modal>
        <!-- 弹窗公告 -->
         <a-modal v-if="IS_POP" v-model:visible="IS_POP" :title="POP_DATA.name" width="30%" :maskClosable="false" :closable="false"
          :bodyStyle="{'height': '270px'}">
            <div class="ql-container">
              <div class="ql-editor">
                <div v-if="!!POP_DATA.content" v-html="POP_DATA.content"></div>
                <div v-else>'暂无数据'</div>
              </div>
            </div>
            <template slot="footer" style="marginTop:10px">
              <a-button  type="primary" @click="disablePop">知道了</a-button>
            </template>
        </a-modal>
         <!-- <header-notice ref="headerNotice" class="action" /> -->
      </div>
    </div>
    <!-- 修改密码 -->
    <modifyPassword ref="modifyPassword" :closable="closable">
      <div slot>
        <a-form-item
          :wrapperCol="{span: 24}"
          style="text-align:center;font-size:1.6rem"
        >
          <a-icon
            type="warning"
            style="color:#faad14;font-size:1.8rem;margin-right:10px"
          />
          {{ extendS2 }}
        </a-form-item>
      </div>
    </modifyPassword>
  </a-layout>
</template>
<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import {mapGetters, mapMutations, mapState,mapActions} from 'vuex'
import RouteView from './RouteView'
// 二级菜单
import SMenu from '@/components/Menu/SMenu'
// 多级树形菜单
import TreeMenu from '@/components/Menu/SideMenu'
import GlobalHeader from '@/components/GlobalHeader'
// import headerNotice from '@/components/HeaderNotice'
import GlobalFooter from '@/components/GlobalFooter'
import modifyPassword from '@/components/SelfModal/ModifyPassword'
import PageDrawer from '@/components/Drawer/index.vue'
import BlankLayout from './BlankLayout.vue'
import PageTab from './pageTab.vue'
import Login from '@/views/user/Login'

  export default {
  name: 'BasicLayout',
  components: {
    RouteView,
    SMenu,
    TreeMenu,
    GlobalHeader,
    // headerNotice,
    GlobalFooter,
    modifyPassword,
    PageDrawer,
    PageTab,
    Login,
    BlankLayout
  },
  data () {
    return {
      isTreeMenu: true,
      menus: [],
      keepAliveComponentInstance: null,
      closable: false, // 修改密码弹框右上角是否显示叉
      isShowEjMenu: false,
      ssoSrc: location.href.split('#')[0] + "#/401?redirect=/sso/callback",
      isFirst:false
    }
  },
  computed: {
    ...mapGetters(['addRouters', 'extendS2', 'extendS1', 'userId']),
    ...mapState({
      pageTabRef: (state) => state.tagsView.pageTabRef,
      innerLoginVisible: (state) => state.app.innerLoginVisible,
      ssoLoginVisible: (state) => state.app.ssoLoginVisible,
      IS_POP: state => state.sysAnnounce.IS_POP,
      POP_DATA: state => state.sysAnnounce.POP_DATA,
    }),
    destroyedViews() {
      if (!this.pageTabRef) {
        return [];
      }
      return this.pageTabRef.compToDestroy.map(c => {
        let com = this.pageTabRef.keepAliveComponentInstance.cache[c];
        return com.tag;
      });
    },
    drawerCotentComp () {
      console.log(444, this.$store.state.app)
      return this.$store.state.app.drawerConfig.compName
    }
  },
  created () {
    this.menus = this.addRouters
    // 判断显示强制修改密码还是可选更新密码
    if (this.extendS1 === '10') {
      // 更新密码
      this.closable = true
      this.$refs.modifyPassword.visible = true
    } else if (this.extendS1 === '20') {
      // 强制更新密码
      this.closable = false // 不显示后上脚关闭按钮
      this.$refs.modifyPassword.visible = true
    }
     this.queryIsPop()
  },
  mounted () {
    if (this.$refs.keepAliveContainer) {
      this.keepAliveComponentInstance = this.$refs.keepAliveContainer.childNodes[1].__vue__// 获取keep-alive的控件实例对象
      this.$store.dispatch("tagsView/setPageTabRef", this.$refs.pageTab);
    }
  },
  methods: {
    ...mapMutations(['SET_newDataCache','SET_IS_POP']),
     ...mapActions(['queryIsPop']),
     disablePop(){
      const { $store } = this
      $store.commit('SET_IS_POP', false)
     },
  },
  watch: {
    $route: {
      // 切换页面时抽屉关闭
      handler: function () {
        const vm = this
        vm.SET_newDataCache({})
      }
    },
    addRouters(val) {
      this.menus = val;
    }

  }
}
</script>

<style lang="less">
.pageContent{
    width:calc(100% - 70px);
    background: #fff;
    display: flex;
    flex-direction: column;
    position: relative;
    &.thinWidth {
       width:calc(100% - 210px);
    }
    .pageContentMain {
      flex:1 0 0;
      overflow-y: hidden;
      display: flex;
      flex-direction: column;
    }
    .footer {
      flex:none;
    }
}

.tree-menu-layout {
  .pageContent {
    width: calc(100% - 80px);

    &.thinWidth {
      width: calc(100% - 256px);
    }
  }

  &.ant-layout.ant-layout-has-sider{
    flex-direction: column!important;
  }
  .ant-menu{
    //background: #f8f8f8;
  }
  .ant-menu-submenu > .ant-menu {
    //background-color: #f8f8f8;
  }
  .ant-menu-inline-collapsed > .ant-menu-item,
  .ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item,
  .ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-submenu > .ant-menu-submenu-title,
  .ant-menu-inline-collapsed > .ant-menu-submenu > .ant-menu-submenu-title{
    padding: 0 28px !important;
  }

  .ant-menu-inline-collapsed{
    &>.ant-menu-submenu > .ant-menu-submenu-title, &>.ant-menu-item{
      .anticon{
        font-size: 1.8em!important;
      }
    }
  }
}

</style>
